<template>
  <div>
    <div>
      <input type="text" v-model="todoText" />
      <button @click="addTodo">ADD</button>
      <p>共：{{ store.count }}</p>
    </div>
    <ul>
      <li v-for="todo in store.todoList" :key="todo.id">
        <input
          type="checkbox"
          :checked="todo.completed"
          @click="store.toggleTodo(todo.id)"
        />
        <span
          :style="{ textDecoration: todo.completed ? 'line-through' : '' }"
          >{{ todo.content }}</span
        >
        <button @click="store.removeTodo(todo.id)">REMOVE</button>
      </li>
    </ul>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useTodoList1 } from "../store/todoList1";
const store = useTodoList1();
const todoText = ref("");
const addTodo = () => {
  if (!todoText.value) return;
  const todo = {
    id: new Date().getTime().toString(),
    content: todoText.value,
    completed: false,
  };
  store.addTodo(todo);
  todoText.value = "";
};
</script>
<style lang="scss" scoped></style>
